<template>
  <div id="app">
    <div class="header">
      <div class="container22 clearfix">
        <el-row class="PC" style="padding: 0 10px 0 40px">
          <el-col :span="1">
            <div class="index-logo">
              <router-link to="/">
                <img src="../static/image/logoz1.png" class="index-logo1"/>
              </router-link>
            </div>
          </el-col>
          <el-col :span="9">
            <img class="bigLogo" src="../static/image/logobig.png"/>
          </el-col>
          <el-col :span="10" :offset="4">
            <div class="keyWord">
              <div style="line-height: 90px" class="text-left ggh">
                <span>
                  <img class="timeSpan" src="../static/image/time.jpg" style="margin-right: 10px"/>
                  <el-popover placement="bottom" trigger="hover" @show="initCalendar" @hide="hideCalendar">
                    <span id="localtime" class="timeSpan" slot="reference"><font color="#373737"></font></span>
                    <div id="calendarDiv"></div>
                  </el-popover>
                  <!-- <img
                    src="../static/image/time.jpg"
                    style="margin-right: 10px"
                  />
                  <span id="localtime"
                    ><font color="#373737"
                      >2021-07-19 19:41:51 星期一</font
                    ></span>  -->
                  </span>
                &nbsp&nbsp
                <el-popover placement="bottom" trigger="hover">
                  <span @click="weatherClick" class="weatherSpan" slot="reference">天气</span>
                  <iframe allowtransparency="true" frameborder="0" width="385" height="96" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=1&z=1&t=0&v=0&d=3&bd=0&k=&f=&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=54511&w=385&h=96&align=center"></iframe>
                </el-popover>
                &nbsp&nbsp
                <el-input
                  v-model="searchName"
                  placeholder="请输入新闻关键字"
                  suffix-icon="el-icon-search"
                  @change="onchange"
                ></el-input>
                <img :src="ggh" style="max-height: 80px; max-width: 80px"/>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row
          type="flex"
          class="row-bg Mobile hidden-sm-and-up"
          justify="space-between"
        >
          <el-col :span="8" class="m-box">
            <div class="menu-btn" @click="mobileNav">
              <span></span><span></span><span></span>
            </div>
          </el-col>
          <el-col :span="8" class="m-box m-index-logo" style="padding: 0">
            <router-link to="/">
              <img src="../static/image/logoz1.png" class="index-logo2"/>
            </router-link>
          </el-col>
          <!-- <el-col :span="8" class="m-box text-right">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                登录<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item><a @click="goLogin()">CMBI 登录</a></el-dropdown-item>
                <el-dropdown-item><a @click="goLogin()">CPBI 登录</a></el-dropdown-item>
                <el-dropdown-item><a @click="goLogin()">DataX 登录</a></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col> -->
        </el-row>
      </div>
    </div>
    <div :class="['mobile-nav', [mobile_nav ? 'm-nav-show' : 'm-nav-hide']]">
      <el-row>
        <el-col :span="12" style="padding-left: 20px">
          <img src="../static/image/logoz.png" class="index-logo1"/>
        </el-col>
        <el-col :span="12" class="text-right" style="padding-right: 20px">
          <i
            class="el-icon-close"
            @click="mobileNav"
            style="color: #ffffff; font-size: 30px"
          ></i>
        </el-col>
      </el-row>
      <el-menu
        :default-active="activeIndex"
        active-text-color="#1965ab"
        :router="true"
        class="el-menu-vertical-demo"
        background-color="transparent"
        text-color="#fff"
        style="margin: 20px 0"
      >
        <el-menu-item index="/" @click="mobileNav">关于我们</el-menu-item>
        <el-submenu index="/solution">
          <template slot="title">专业服务</template>
          <el-menu-item index="qingsuan" @click="mobileNav"
          >企业清算
          </el-menu-item>
          <el-menu-item index="chanquan" @click="mobileNav"
          >产权交易经纪
          </el-menu-item>
          <el-menu-item index="manageAsk" @click="mobileNav"
          >管理咨询
          </el-menu-item>
          <!-- <el-menu-item index="2-3">其它业务</el-menu-item> -->
        </el-submenu>
        <el-submenu index="/law">
          <template slot="title">法律法规</template>
          <el-menu-item index="qingsuanliuc" @click="mobileNav"
          >清算流程
          </el-menu-item>
          <el-menu-item index="payMoney" @click="mobileNav"
          >费用参考标准
          </el-menu-item>
          <el-menu-item index="conturyLaw" @click="mobileNav"
          >国家法律法规
          </el-menu-item>
          <el-menu-item index="shLaw" @click="mobileNav"
          >上海法规政策
          </el-menu-item>
        </el-submenu>
        <el-submenu index="/product">
          <template slot="title">众尊视野</template>
          <el-menu-item index="zixun" @click="mobileNav">众尊资讯</el-menu-item>
          <el-menu-item index="hangyeMove" @click="mobileNav"
          >行业动态
          </el-menu-item>
          <el-menu-item index="lawExpress" @click="mobileNav"
          >法规速递
          </el-menu-item>
          <el-menu-item index="zzStudy" @click="mobileNav"
          >众尊研究
          </el-menu-item>
        </el-submenu>
        <el-menu-item index="/gnDemo" @click="mobileNav">案例推荐</el-menu-item>
        <el-menu-item index="/cuntomer" @click="mobileNav"
        >客户伙伴
        </el-menu-item>
      </el-menu>
    </div>
    <div class="new-menu dengdai">
      <el-row class="PC">
        <el-col>
          <el-menu
            :default-active="activeIndex"
            active-text-color="white"
            :router="true"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="/">关于我们</el-menu-item>
            <el-submenu index="/solution" @click.native="solutionClick">
              <template slot="title">专业服务</template>
              <el-menu-item index="qingsuan">企业清算</el-menu-item>
              <el-menu-item index="chanquan">产权交易经纪</el-menu-item>
              <el-menu-item index="manageAsk">管理咨询</el-menu-item>
              <!-- <el-menu-item index="2-3">其它业务</el-menu-item> -->
            </el-submenu>
            <el-submenu index="/law" @click.native="lawClick">
              <template slot="title">法律法规</template>
              <el-menu-item index="qingsuanliuc">清算流程</el-menu-item>
              <el-menu-item index="payMoney">费用参考标准</el-menu-item>
              <el-menu-item index="conturyLaw">国家法律法规</el-menu-item>
              <el-menu-item index="shLaw">上海法规政策</el-menu-item>
            </el-submenu>
            <el-submenu index="/product" @click.native="productClick">
              <template slot="title">众尊视野</template>
              <el-menu-item index="zixun">众尊资讯</el-menu-item>
              <el-menu-item index="hangyeMove">行业动态</el-menu-item>
              <el-menu-item index="lawExpress">法规速递</el-menu-item>
              <el-menu-item index="zzStudy">众尊研究</el-menu-item>
            </el-submenu>
            <el-menu-item index="/gnDemo">案例推荐</el-menu-item>
            <el-menu-item index="/cuntomer">客户伙伴</el-menu-item>
            <el-menu-item index="/clutrue">企业文化</el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </div>
    <div :class="['main-content', { pdb0: activeIndex == '/contactUs' }]">
      <router-view
        :class="[activeIndex == '/contactUs' ? '' : 'content']"
      ></router-view>
    </div>
    <Footer v-if="activeIndex != '/contactUs'"></Footer>
  </div>
</template>

<script>
  import Footer from "./components/footer/Footer";
  import ElCol from "element-ui/packages/col/src/col";
  import moment from "moment";

  export default {
    name: "App",
    data() {
      return {
        value1xz: null,
        valuecalendar: new Date(),
        searchName: "",
        activeIndex: "",
        activeColor: "#409EFF",
        mobile_nav: false,
        ggh: ""
      };
    },
    components: {
      ElCol,
      Footer,
    },
    mounted() {
      // this.$axios
      //   // .get("https://api.coindesk.com/v1/bpi/currentprice.json")
      //   .get("/baseInfo/consult/getHdpList")
      //   .then((response) => {
      //     console.log(response);
      //   })
      //   .catch((error) => {
      //     console.log(error);
      //   });
      this.$nextTick(() => {
        this.tick();
        setInterval(this.tick, 1000);
      });
      this.$axios
        .get(`/baseInfo/consult/getGzh`)
        .then((response) => {
          console.log(response.data);
          this.ggh = response.data.data.piclink;
        })
        .catch((error) => {
          this.loading = false;
          console.log(error);
        });
    },
    methods: {
      productClick(){
        this.$router.push({
          path: "/zixun",
        });
      },
      lawClick(){
        this.$router.push({
          path: "/qingsuanliuc",
        });
      },
      solutionClick(){
        this.$router.push({
          path: "/qingsuan",
        });
      },
      initCalendar() {
        layui.use('laydate', function(){
          var laydate = layui.laydate;
          laydate.render({
            elem: '#calendarDiv'
            ,position: 'static'
            ,calendar: true
            ,btns: ['clear', 'now']
            ,change: function(value, date){ //监听日期被切换
            }
          });
        });
      },
      hideCalendar() {
        document.getElementById("calendarDiv").innerHTML = "";
      },
      changeDate(e) {
        this.value = e
        // document.getElementById("localtime").innerHTML = e
      },
      onchange(e) {
        console.log(e);
        this.$router.push({
          path: "/zixun",
          query: {
            noticeTitle: e,
          },
        });
      },
      zhongzzClick() {
        this.$router.push({path: "/zhongzz"});
      },
      weatherClick() {
        this.$router.push({path: "/weather"});
      },
      calendarClick() {
        this.$router.push({path: "/calendar"});
      },
      handleSelect(val) {
      },
      mobileNav() {
        this.mobile_nav = !this.mobile_nav;
      },
      getPath() {
        this.activeIndex = this.$route.path;
      },
      goLogin(url, opt_label) {
        window.open(url);
        _hmt.push(["_trackEvent", "login", "click", opt_label]);
      },
      showLocale(objD) {
        var str, colorhead, colorfoot;
        var yy = objD.getYear();
        if (yy < 1900) yy = yy + 1900;
        var MM = objD.getMonth() + 1;
        if (MM < 10) MM = "0" + MM;
        var dd = objD.getDate();
        if (dd < 10) dd = "0" + dd;
        var hh = objD.getHours();
        if (hh < 10) hh = "0" + hh;
        var mm = objD.getMinutes();
        if (mm < 10) mm = "0" + mm;
        var ss = objD.getSeconds();
        if (ss < 10) ss = "0" + ss;
        var ww = objD.getDay();
        if (ww == 0) colorhead = '<font color="#FF0000">';
        if (ww > 0 && ww < 6) colorhead = '<font color="#373737">';
        if (ww == 6) colorhead = '<font color="#008000">';
        if (ww == 0) ww = "星期日";
        if (ww == 1) ww = "星期一";
        if (ww == 2) ww = "星期二";
        if (ww == 3) ww = "星期三";
        if (ww == 4) ww = "星期四";
        if (ww == 5) ww = "星期五";
        if (ww == 6) ww = "星期六";
        colorfoot = "</font>";
        str =
          colorhead +
          yy +
          "-" +
          MM +
          "-" +
          dd +
          " " +
          hh +
          ":" +
          mm +
          ":" +
          ss +
          "  " +
          ww +
          colorfoot;
        return str;
      },
      tick() {
        var today;
        today = new Date();
        document.getElementById("localtime").innerHTML = this.showLocale(today);
      },
    },
    created() {
      this.activeIndex = this.$route.path;
    },
    watch: {
      $route: "getPath",
    },
  };
</script>

<style lang="less">
  @import "style/common.less";

  .dengdai {
    width: 100%;
    height: 60px;
    background: #1965ab;
  }

  .index-logo1 {
    width: 70px;
  }

  .index-logo2 {
    width: 70px;
  }

  .newsDiv {
    padding-left:20px;
    padding-top: 15px;
    cursor: pointer
  }

  .newsImg {
    width: 120px;
    height: 100px;
  }

  .newsChildDiv {
    padding-top: 25px;
  }

  .newsChildDiv2 {
    float: right;
    padding-top: 15px;
  }

  .el-menu--horizontal .el-menu .el-menu-item,
  .el-menu--horizontal .el-menu .el-submenu__title {
    font-size: 16px;
  }

  .container22 {
    width: 100%;
  }

  .header {
    .el-input {
      width: 180px;
      margin-left: 10px;
    }

    .el-menu-item {
      font-size: 19px;
      font-weight: bold;
    }

    .el-submenu__title {
      font-size: 19px;
      font-weight: bold;
    }

    .ggh {
      font-size: 19px;
      color: #1965ab;
      cursor: pointer;
    }

    @media screen and (max-width: 1540px) {
      .ggh {
        font-size: 17px;
      }

      .el-input {
        width: 180px;
      }
    }

    @media screen and (max-width: 1484px) {
      .ggh {
        font-size: 15px;
      }

      .el-input {
        width: 180px;
      }
    }

    @media screen and (max-width: 1398px) {
      .ggh {
        font-size: 15px;
      }

      .weatherSpan {
        display: none;
      }

      .el-input {
        width: 180px;
      }
    }

    @media screen and (max-width: 1316px) {
      .ggh {
        font-size: 15px;
      }

      .timeSpan {
        display: none;
      }

      .el-input {
        width: 180px;
      }
    }

    @media screen and (max-width: 850px) {
      .ggh {
        font-size: 15px;
      }

      .timeSpan {
        display: none;
      }

      .bigLogo {
        display: none;
      }

      .el-input {
        width: 180px;
      }
    }

    @media screen and (max-width: 784px) {
      .ggh {
        font-size: 15px;
      }

      .timeSpan {
        display: none;
      }

      .bigLogo {
        display: none;
      }

      .el-input {
        width: 160px;
      }
    }
  }

  .keyWord {
    display: flex;
    flex-direction: row-reverse;
  }

  .el-menu--horizontal {
    height: 60px;
  }

  .el-menu--horizontal {
    border-bottom: 0 !important;
  }

  .el-menu--horizontal > .el-menu-item {
    height: 60px;
  }

  .el-menu--horizontal > .el-submenu .el-submenu__title {
    height: 60px;
  }

  .new-menu {
    .el-menu {
      background-color: #031d74;
    }

    .el-menu--horizontal > .el-menu-item,
    .el-submenu .el-submenu__title {
      color: white !important;
      font-size: 16px !important;
      width: 150px;
      text-align: center;
    }

    .el-menu--horizontal > .el-menu-item:hover,
    .el-submenu .el-submenu__title:hover {
      background-color: #ff9201 !important;
    }

    .el-menu--horizontal > .is-active {
      background-color: #ff9201 !important;
    }

    .el-menu--horizontal > .el-menu-item:focus,
    .el-submenu .el-submenu__title:focus {
      background-color: #ff9201 !important;
    }
  }
</style>
